import React, { useState, useEffect } from 'react';
import { useDispatch, connect } from 'umi';
import { message, Modal, Button, Table, Input } from 'antd';
import styles from './RoleAuthUsers.less';
import { columns } from '../../../commonrolemanage/components/RoleAuthUsers/userConfig';

const UsersSelect = (props) => {
  const { isModalVisible = false, handleCancel, handOk, selectUsers, orgId = '', common } = props;
  const { appCodeOfSelect } = common;
  const dispatch = useDispatch();
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [selectedRows, setSelectedRows] = useState([]);
  const [listOUser, setListOfUser] = useState([]);
  const [pagination, setPagination] = useState({
    pageSize: 5,
    showSizeChanger: true,
    pageSizeOptions: [5, 10, 20, 50],
  });
  const [userAccount, setUserAccount] = useState();
  const [loading, setLoading] = useState(true);

  // useImperativeHandle(ref, () => ({
  //   handleSubmit,
  // }));

  useEffect(() => {
    setSelectedRows(selectUsers || []);
    setSelectedRowKeys(selectUsers?.map((d) => d.userAccount) || []);
  }, [selectUsers]);

  useEffect(() => {
    if (!orgId && orgId !== 0) return;
    dispatch({
      type: 'commonRoleManageModel/getUserList',
      payload: { pageIndex: 1, pageSize: 1000000, orgIdList: [orgId], appCode: appCodeOfSelect },
    }).then((res) => {
      const { code, message: errMsg, data } = res;
      if (code === 0) {
        setListOfUser(data?.dataList?.map((d) => ({ ...d, userId: d.id })));
      } else {
        message.error(errMsg);
      }
      setLoading(false);
    });
    return () => {};
  }, [orgId, appCodeOfSelect]);

  const handleOk = () => {
    handOk(selectedRows.map((d) => ({ ...d, username: d.userName, orgName: d.orgs })));
  };

  const onSelectChange = (rowKeys, rows) => {
    setSelectedRowKeys(rowKeys);
    setSelectedRows(rows);
  };

  const onUserSearch = () => {
    setLoading(true);
    dispatch({
      type: 'commonRoleManageModel/getUserList',
      payload: {
        pageIndex: 1,
        pageSize: 1000000,
        userAccount,
        orgIdList: [orgId],
        appCode: appCodeOfSelect,
      },
    }).then((res) => {
      const { code, message: errMsg, data } = res;
      if (code === 0) {
        setListOfUser(data?.dataList?.map((d) => ({ ...d, userId: d.id })));
      } else {
        message.error(errMsg);
      }
      setLoading(false);
    });
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const handleTableChange = (pagination) => {
    setPagination(pagination);
  };

  return (
    <Modal
      width={600}
      title="选择用户"
      visible={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <div className={styles.root}>
        <div className={styles.menuTitleWrapper}>
          <Input
            placeholder="请输入用户信息"
            value={userAccount}
            onChange={(e) => setUserAccount(e.target.value)}
            style={{ marginRight: '20px' }}
          />
          <Button onClick={() => onUserSearch()}>查询</Button>
        </div>
        <div className={styles.menuTable}>
          <Table
            rowSelection={rowSelection}
            rowKey="userAccount"
            columns={columns}
            dataSource={listOUser}
            pagination={pagination}
            // scroll={{ y: 260 }}
            onChange={handleTableChange}
            loading={loading}
          />
        </div>
      </div>
    </Modal>
  );
};

export default connect((state) => state)(UsersSelect);
